<!--
 * @Author: zcy
 * @Date: 2025-02-17 10:20:28
 * @LastEditTime: 2025-02-17 10:46:36
 * @LastEditors: zcy
 * @FilePath: \my-vue-app\src\components\HelloWorld.vue
 * @Description: 
-->
<script setup>
import { ref } from "vue";
import database from "../database/pokemon_data1.json";
defineProps({
  msg: String,
});

const count = ref(0);
</script>

<template>
  <div class="card">
    <el-form
      style="max-width: 600px"
      :model="sizeForm"
      label-width="auto"
      :label-position="'top'"
      :size="size"
    >
      <el-form-item label="Activity name">
        <el-input v-model="sizeForm.name" />
      </el-form-item>
      <el-form-item label="Activity zone">
        <el-select
          v-model="sizeForm.region"
          placeholder="please select your zone"
        >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time">
        <el-col :span="11">
          <el-date-picker
            v-model="sizeForm.date1"
            type="date"
            aria-label="Pick a date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-col>
        <el-col class="text-center" :span="1" style="margin: 0 0.5rem"
          >-</el-col
        >
        <el-col :span="11">
          <el-time-picker
            v-model="sizeForm.date2"
            aria-label="Pick a time"
            placeholder="Pick a time"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="Activity type">
        <el-checkbox-group v-model="sizeForm.type">
          <el-checkbox-button value="Online activities" name="type">
            Online activities
          </el-checkbox-button>
          <el-checkbox-button value="Promotion activities" name="type">
            Promotion activities
          </el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources">
        <el-radio-group v-model="sizeForm.resource">
          <el-radio border value="Sponsor">Sponsor</el-radio>
          <el-radio border value="Venue">Venue</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
